<template>
  <div style="height:932px;width: 100%;padding: 10px;">
    <a-row>
      <a-col :span="6">
        <div class="all" style="margin-right:10px;">
          
          <div id="r3grid-L1" class="r3grid-L1"></div>
        </div>

        <div class="all" style="margin-top: 10px;margin-right: 10px;">
          <div id="r3grid-L2" class="r3grid-L2"></div>
        </div>
      </a-col>
      <a-col :span="12">
        <div class="all" >
          <div id="r3grid-M1" class="r3grid-M1">
           
            <div
              style="padding: 6px;position: absolute;z-index: 2;background-color:rgba(18, 37, 79, 0.45);;text-align: center;border-radius: 8px;color: #ffffff;font-size: 16px;left: 0;right: 0;margin: 0 auto;"
            > <div>
      <a-radio-group v-model="currentzhibiao" @change="onZhibiaoChange">
        <a-radio-button value="pm25">
          PM2.5
        </a-radio-button>
        <a-radio-button value="pm10">
          PM10
        </a-radio-button>
        
      </a-radio-group>
    </div>乌海及周边污染物扩散预测模型结果</div>
    <div style="
    width: 180px;
    position: absolute;
    bottom: 5px;
    right: 1px;
    z-index: 100;
    border: solid 1px #9999ff;
    background-color: rgba(0, 0, 0, 0.45);
   
">
<a-card size="small" title="图例" :bodyStyle="bodyStyle">
  <a-row v-for="item in lengedData"  v-bind:key="item.name">
  <a-col style="
    text-align: center;
" :span="12"><a-tag v-bind:style ="{ 'background-color': item.color,'width':'40px','height':'20px'}"></a-tag></a-col>
  <a-col style="
    text-align: center;
" :span="12"><div class="grid-content ">{{item.name}}</div></a-col>
 
</a-row>
 
  </a-card>
</div>
            <TimeBar ref="timeBar"></TimeBar>
          </div>
        </div>
      </a-col>
      <a-col :span="6">
        <div class="all" style="margin-left:10px;">
          <div id="r3grid-R1" class="r3grid-R1"></div>
        </div>

        <div class="all" style="margin-top: 10px;margin-left:10px;">
          <div id="r3grid-R2" class="r3grid-R2">
            <div class="r3grid-R2-Title">模型参数说明</div>

            <div class="r3grid-R2-Content">
              模型参数：
              <span>
                y=k0+K1*X
                <sub>1</sub>+K2*X
                <sub>2</sub>+K3*X
                <sub>3</sub>+K4*X
                <sub>4</sub>+K5*X
                <sub>5</sub>
              </span>
            </div>
            <div class="r3grid-R2-Content">
              回归模型的平均误差：
              <span>0.98833858</span>
            </div>

            <a-row>
              <a-col :span="8">
                <div class="counter">
                  <div class="counter-content">
                    <div class="counter-icon fa fa-globe"></div>
                    <span class="counter-value">83个</span>
                  </div>
                  <h3 class="title">实测模型结果</h3>
                </div>
              </a-col>
              <a-col :span="8">
                <div class="counter red">
                  <div class="counter-content">
                    <div class="counter-icon fa fa-rocket"></div>
                    <span class="counter-value">4个</span>
                  </div>
                  <h3 class="title">遥感反演模型结果</h3>
                </div>
              </a-col>
              <a-col :span="8">
                <div class="counter purple">
                  <div class="counter-content">
                    <div class="counter-icon fa fa-mobile"></div>
                    <span class="counter-value">30%</span>
                  </div>
                  <h3 class="title">预测模型结果</h3>
                </div>
              </a-col>
            </a-row>
          </div>
        </div>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="12">
        <div class="all" style="margin-right:10px;margin-top:10px;">
          <div id="r3grid-L3" class="r3grid-L3"></div>
        </div>
      </a-col>
      <a-col :span="12">
        <div class="all" style="margin-top:10px;">
          <div id="r3grid-R3" class="r3grid-R3"></div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import * as mapOper from '../../scripts/mapOper.js';
let config = require('../../config/config');
import commonOper from '../../scripts/commonOper';

import TimeBar from './TimeBar.vue';
var _ = require('lodash');
export default {
  name: 'Mxfxyc',
  data() {
    return {
      currentzhibiao: 'pm25',
      currentHour: 20,
      bodyStyle:{padding: '4px'},
      map: null,
      lengedData:[],
      gaugeChart: null,
      L3Chart: null,
      gaugeChartOptions: {
        title: [
          {
            x: '24%',
            bottom: 35,
            text: '实时AQI',
            textStyle: {
              fontSize: 14,
              color: '#fff'
            }
          },
          {
            x: '38%',
            bottom: 1,
            text: '',
            textStyle: {
              fontSize: 12,
              color: '#fff'
            }
          },
          {
            x: '68%',
            bottom: 35,
            text: '明日预测AQI',
            textStyle: {
              fontSize: 14,
              color: '#fff'
            }
          }
        ],
        tooltip: {
          show: true
        },
        series: [
          {
            type: 'gauge',
            center: ['75%', '55%'], // 默认全局居中
            radius: '55%',
            min: 0,
            max: 350,
            startAngle: 200,
            endAngle: -20,
            clockwise: true,
            axisLine: {
              show: true,
              lineStyle: {
                width: 2,
                shadowBlur: 0,
                color: [[1, '#03B7C9']]
              }
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: '#03B7C9',
                width: 1
              },
              length: -6,
              splitNumber: 5
            },
            splitLine: {
              show: true,
              length: -10,
              lineStyle: {
                color: '#03B7C9'
              }
            },
            axisLabel: {
              distance: -20,
              textStyle: {
                color: '#03B7C9',
                fontSize: '10',
                fontWeight: 'bold'
              }
            },
            pointer: {
              //仪表盘指针
              show: 0
            },
            detail: {
              show: false
            },
            data: [
              {
                name: '',
                value: 50
              }
            ]
          },
          {
            startAngle: 200,
            endAngle: -20,
            type: 'gauge',
            center: ['75%', '55%'], // 默认全局居中
            radius: '50%',
            min: 0,
            max: 350,
            splitNumber: 0,
            axisLine: {
              // 坐标轴线
              lineStyle: {
                color: [
                  [0.66, '#dddddd'],
                  [1, '#dddddd']
                ], // 属性lineStyle控制线条样式
                width: 3
              }
            },
            axisLabel: {
              // 坐标轴小标记
              textStyle: {
                // 属性lineStyle控制线条样式
                fontWeight: 'bolder',
                fontSize: 16,
                color: 'rgba(30,144,255,0)'
              }
            },
            splitLine: {
              // 分隔线
              length: 10, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                width: 0,
                color: '#444'
              }
            },
            pointer: {
              // 分隔线 指针
              color: '#666666',
              width: 0,
              length: 230
            },
            detail: {
              show: false
            }
          },
          {
            name: '今日AQI',
            type: 'gauge',
            startAngle: 200,
            endAngle: -20,
            radius: '45%',
            center: ['75%', '55%'], // 默认全局居中
            min: 0,
            max: 350,
            axisLine: {
              show: false,
              lineStyle: {
                width: 12,
                shadowBlur: 0,
                color: [
                  [0.14, '#096'],
                  [0.28, '#ffde33'],
                  [0.42, '#ff9933'],
                  [0.57, '#cc0033'],
                  [0.85, '#660099'],
                  [1, '#7e0023']
                ]
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false,
              length: 20
            },
            axisLabel: {
              show: false
            },
            pointer: {
              show: true,
              width: 4
            },
            detail: {
              show: true,
              offsetCenter: [0, '60%'],
              textStyle: {
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            itemStyle: {
              normal: {
                color: '#03B7C9'
              }
            },
            data: [
              {
                value: 0
              }
            ]
          },
          {
            type: 'gauge',
            center: ['25%', '55%'], // 默认全局居中
            radius: '55%',
            min: 0,
            max: 350,
            startAngle: 200,
            endAngle: -20,
            clockwise: true,
            axisLine: {
              show: true,
              lineStyle: {
                width: 2,
                shadowBlur: 0,
                color: [[1, '#03B7C9']]
              }
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: '#03B7C9',
                width: 1
              },
              length: -6,
              splitNumber: 5
            },
            splitLine: {
              show: true,
              length: -10,
              lineStyle: {
                color: '#03B7C9'
              }
            },
            axisLabel: {
              distance: -20,
              textStyle: {
                color: '#03B7C9',
                fontSize: '10',
                fontWeight: 'bold'
              }
            },
            pointer: {
              //仪表盘指针
              show: 0
            },
            detail: {
              show: false
            },
            data: [
              {
                name: '',
                value: 350
              }
            ]
          },
          {
            startAngle: 200,
            endAngle: -20,
            type: 'gauge',
            center: ['25%', '55%'], // 默认全局居中
            radius: '50%',
            min: 0,
            max: 350,
            splitNumber: 0,
            axisLine: {
              // 坐标轴线
              lineStyle: {
                color: [
                  [0.66, '#dddddd'],
                  [1, '#dddddd']
                ], // 属性lineStyle控制线条样式
                width: 3
              }
            },
            axisLabel: {
              // 坐标轴小标记
              textStyle: {
                // 属性lineStyle控制线条样式
                fontWeight: 'bolder',
                fontSize: 16,
                color: 'rgba(30,144,255,0)'
              }
            },
            splitLine: {
              // 分隔线
              length: 10, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                width: 0,
                color: '#444'
              }
            },
            pointer: {
              // 分隔线 指针
              color: '#666666',
              width: 0,
              length: 230
            },
            detail: {
              show: false
            }
          },
          {
            name: '实时AQI',
            type: 'gauge',
            startAngle: 200,
            endAngle: -20,
            radius: '45%',
            center: ['25%', '55%'], // 默认全局居中
            min: 0,
            max: 350,

            axisLine: {
              show: false,
              lineStyle: {
                width: 12,
                shadowBlur: 0,
                color: [
                  [0.14, '#096'],
                  [0.28, '#ffde33'],
                  [0.42, '#ff9933'],
                  [0.57, '#cc0033'],
                  [0.85, '#660099'],
                  [1, '#7e0023']
                ]
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false,
              length: 20
            },
            axisLabel: {
              show: false
            },
            pointer: {
              show: true,
              width: 4
            },
            detail: {
              show: true,
              offsetCenter: [0, '60%'],
              textStyle: {
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            itemStyle: {
              normal: {
                color: '#03B7C9'
              }
            },
            data: [
              {
                value: 0
              }
            ]
          }
        ]
      },
      L3Option: {
        title: {
          top: '10',
          left: 'center',
          text: '乌海市逐小时pm2.5实测值与预测值分布',
          textStyle: {
            align: 'center',
            color: '#FFFFFF'
            //fontSize: 16
          }
        },
        //backgroundColor: '#043491',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {
          x: 'center',
          y: '40px',
          textStyle: {
            color: '#f2f2f2',
            fontSize: 13
          },
          icon: 'circle',
          data: ['实测值', '预测值']
        },
        dataZoom: [
          {
            type: 'slider',
            show: true,
            height: 20,
            left: '10%',
            right: '10%',
            bottom: '2%',
            start: 50,
            end: 100,
            textStyle: {
              color: '#d4ffff',
              fontSize: 11
            }
          },
          {
            type: 'inside'
          }
        ],
        grid: {
          right: '5%',
          bottom: '10%',
          left: '2%',
          top: '80px',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            name: '时间',
            nameTextStyle: {
              color: '#d4ffff'
            },
            axisLine: {
              lineStyle: {
                color: '#0B4CA9'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#FFF',
                fontSize: 12
              }
              //interval:0,
              //rotate:30
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: 'μg/m³',
            nameTextStyle: {
              color: '#d4ffff'
            },
            position: 'left',
            axisLine: {
              lineStyle: {
                color: '#0B4CA9'
              }
            },
            splitLine: {
              lineStyle: {
                color: '#0B4CA9'
              }
            },
            axisLabel: {
              color: '#d4ffff',
              fontSize: 12
            }
          }
        ],
        series: [
          {
            name: '实测值',
            type: 'line',
            yAxisIndex: 0,
            symbolSize: 12,
            itemStyle: {
              normal: {
                color: '#0EF100'
              }
            },
            data: []
          },
          {
            name: '预测值',
            type: 'line',
            yAxisIndex: 0,
            symbolSize: 12,
            itemStyle: {
              normal: {
                color: '#6c50f3'
              }
            },
            data: []
          }
        ]
      },
      R1Chart: null,
      R1Option: {
        title: {
          top: '10',
          left: 'center',
          text: '预测模型各指标相关系数',
          textStyle: {
            align: 'center',
            color: '#FFFFFF'
            //fontSize: 16
          }
        },
        tooltip: {
          position: 'top',
          formatter: function(params) {
            return '相关系数：' + params.data[2];
          }
        },
        grid: {
          right: '5%',
          bottom: '2%',
          left: '2%',
          containLabel: true
        },
        xAxis: {
          name: '指标',
          type: 'category',
          nameTextStyle: {
            color: '#d4ffff'
          },
          axisLine: {
            lineStyle: {
              color: '#d1e6eb'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#FFF',
              fontSize: 12
            },
            interval: 0,
            rotate: 30
          },
          data: []
        },
        yAxis: {
          name: '指标',
          type: 'category',
          nameTextStyle: {
            color: '#d4ffff'
          },
          position: 'left',
          axisLine: {
            lineStyle: {
              color: '#d1e6eb'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#0B4CA9'
            }
          },
          axisLabel: {
            color: '#d4ffff',
            fontSize: 12,
            interval: 0,
            rotate: 40
          },
          data: []
        },
        visualMap: {
          color: ['#B9044E', '#f0ba2e', '#d3ce2b', '#169A7f'],
          min: 0,
          max: 1,
          calculable: false,
          text: ['100', '1'], // 文本，默认为数值文本
          show: false
        },
        series: [
          {
            name: 'Punch Card',
            type: 'heatmap',
            data: [],
            label: {
              normal: {
                show: true
              }
            },
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowColor: 'rgba(120, 0, 0, 0.5)'
              }
            }
          }
        ],
        label: {
          normal: {
            show: true
          }
        },
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      },
      R3Chart: null,
      R3Option: {
        backgroundColor: '#080b30',
        title: {
          text: '乌海市未来6小时pm2.5预测',
          textStyle: {
            align: 'center',
            color: '#fff',
            fontSize: 18
          },
          top: '5%',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(0, 255, 233,0)'
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(255, 255, 255,1)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(0, 255, 233,0)'
                  }
                ],
                global: false
              }
            }
          }
        },
        grid: {
          top: '15%',
          left: '5%',
          right: '5%',
          bottom: '15%'
          // containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisLine: {
              show: true
            },
            splitArea: {
              // show: true,
              color: '#f00',
              lineStyle: {
                color: '#f00'
              }
            },
            axisLabel: {
              color: '#fff'
            },
            splitLine: {
              show: false
            },
            boundaryGap: false,
            data: []
          }
        ],

        yAxis: [
          {
            type: 'value',
            min: 0,
            // max: 140,
            splitNumber: 4,
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255,255,255,0.1)'
              }
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: false,
              margin: 20,
              textStyle: {
                color: '#d1e6eb'
              }
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '注册总量',
            type: 'line',
            // smooth: true, //是否平滑
            showAllSymbol: true,
            // symbol: 'image://./static/images/guang-circle.png',
            symbol: 'circle',
            symbolSize: 25,
            lineStyle: {
              normal: {
                color: '#6c50f3',
                shadowColor: 'rgba(0, 0, 0, .3)',
                shadowBlur: 0,
                shadowOffsetY: 5,
                shadowOffsetX: 5
              }
            },
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#6c50f3'
              }
            },
            itemStyle: {
              color: '#6c50f3',
              borderColor: '#fff',
              borderWidth: 3,
              shadowColor: 'rgba(0, 0, 0, .3)',
              shadowBlur: 0,
              shadowOffsetY: 2,
              shadowOffsetX: 2
            },
            tooltip: {
              show: false
            },
            areaStyle: {
              normal: {
                color: this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(108,80,243,0.3)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(108,80,243,0)'
                    }
                  ],
                  false
                ),
                shadowColor: 'rgba(108,80,243, 0.9)',
                shadowBlur: 20
              }
            },
            data: []
          }
        ]
      }
    };
  },
  mounted() {
    this.$nextTick(() => {
      //this.initK1Charts();
      //this.initK2Charts();
      //this.initK3Charts();

      this.initGaugeChart();
      this.initL3Charts();
      this.initR1Charts();
      this.initR3Charts();
      this.initMap();
      this.initMap2();

      this.getR1ChartData();
      this.getChartR1Data();
    });
  },
  methods: {
    initMap() {
      this.map = mapOper.initBlankMap('r3grid-M1');
      let params = {
        map: this.map,
        center: [36402916.2801803, 4366765.13449465],
        zoom: 3.5
      };
      mapOper.ZoomAndCenter(params);
      //清空图层
      if (this.map) {
        this.map = mapOper.removeAllLayers(this.map);
      }
      
      this.addresultlayer(this.currentzhibiao);
    },
    initMap2() {
      let map = mapOper.initBlankMap('r3grid-L2');
      let params = {
        map: map,
        center: [36402916.2801803, 4366765.13449465],
        zoom: 7.5
      };
      mapOper.ZoomAndCenter(params);
    },
    //仪表盘
    initGaugeChart() {
      let chartDiv = document.getElementById('r3grid-L1');
      this.gaugeChart = this.$echarts.init(chartDiv);
      this.gaugeChart.setOption(this.gaugeChartOptions);
      window.onresize = this.gaugeChart;
    },
    initL3Charts() {
      let chartDiv = document.getElementById('r3grid-L3');
      this.L3Chart = this.$echarts.init(chartDiv);

      this.L3Option.series[0].data = [
        12,
        5,
        12,
        46,
        22,
        24,
        15,
        5,
        54,
        18,
        24,
        18,
        31,
        25,
        27,
        14,
        15,
        21,
        20,
        17
      ];
      this.L3Option.series[1].data = [
        13,
        7,
        10,
        38,
        17,
        28,
        22,
        12,
        28,
        19,
        14,
        19,
        19,
        31,
        22,
        11,
        14,
        19,
        22,
        16
      ];
      this.L3Option.xAxis[0].data = [
        '2019-03-01',
        '2019-03-02',
        '2019-03-03',
        '2019-03-04',
        '2019-03-05',
        '2019-03-06',
        '2019-03-07',
        '2019-03-08',
        '2019-03-09',
        '2019-03-10',
        '2019-03-11',
        '2019-03-12',
        '2019-03-13',
        '2019-03-14',
        '2019-03-15',
        '2019-03-16',
        '2019-03-17',
        '2019-03-18',
        '2019-03-19',
        '2019-03-20'
      ];
      this.L3Chart.setOption(this.L3Option);
      window.onresize = this.L3Chart;
    },
    initR1Charts() {
      let chartDiv = document.getElementById('r3grid-R1');
      this.R1Chart = this.$echarts.init(chartDiv);

      this.R1Chart.setOption(this.R1Option);
      window.onresize = this.R1Chart;
    },
    initR3Charts() {
      let chartDiv = document.getElementById('r3grid-R3');
      this.R3Chart = this.$echarts.init(chartDiv);
      this.R3Chart.setOption(this.R3Option);
      window.onresize = this.R3Chart;
    },
    addresultlayer(zhibiao){
      let that=this;
      console.log('zhibiao',zhibiao);
      //this.mapTitle='乌海及周边'+this.currentzhibiao+'扩散分布';
      let data = new FormData();
      data.append('zhibiao', zhibiao);
      data.append('startTime', '2019-10-31 21:00:00');
      data.append('resultType', 'realtime');
      
      //下载数据
      let params2 = {
        this: this,
        url: config.webapiUrl + '/modelresult/getModelResultLayer',
        data: data,
        successFunc: response => {
          console.log(response.data.data);
          that.$refs.timeBar.init(this.map, response.data.data);
          that.lengedData=[{name:'<35 μg/m3',color:'#096'},{name:'<75 μg/m3',color:'#ffde33'},
            {name:'<115 μg/m3',color:'#ff9933'},{name:'<150 μg/m3',color:'#cc0033'},
            {name:'<250 μg/m3',color:'#660099'},{name:'<500 μg/m3',color:'#7e0023'}
          ];
        },
        failFunc: response => {
          let params = {
            this: this,
            title: '提示',
            message: '网络连接错误！11' + response,
            type: 'warning'
          };
          commonOper.Notification(params);
        }
      };
      commonOper.HttpPost(params2);
    },
    getR1ChartData() {
      let that = this;

      let param = {
        this: that,
        url: 'http://106.74.0.132:4000/api/map/2?type=hour',
        data: {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        },
        successFunc: response => {
          if (response.status === 200 && response.data) {
            let wuhaiaqi = [1];
            let timestamp = '';
            _.forEach(response.data, function(value) {
              if (
                value.name == '中海勃湾学校' ||
                value.name == '市林业局' ||
                value.name == '聚英学校'
              ) {
                wuhaiaqi.push(value.aqi);
                timestamp = value.timestamp;
              }
            });
            let maxAqi = _.max(wuhaiaqi);
            let avgAqi = _.floor(_.mean(wuhaiaqi));
            that.gaugeChartOptions.title[1].text = timestamp;
            //今日
            that.gaugeChartOptions.series[2].data[0].value = avgAqi;
            //小时
            that.gaugeChartOptions.series[5].data[0].value = maxAqi;

            that.gaugeChart.setOption(that.gaugeChartOptions);
            window.onresize = that.gaugeChart;
            that.dayHight = maxAqi;
            that.dayLow = avgAqi;
            var Time = new Date(timestamp);
            that.dayHour2 = Time.getHours() + '时';
            that.dayHour1 = Time.getHours() + '时';
          }
        },
        failFunc: response => {
          let params = {
            this: that,
            title: '提示',
            message: '网络连接错误！' + response,
            type: 'warning'
          };
          commonOper.Notification(params);
        }
      };

      commonOper.HttpGet(param);
    },
    getChartR1Data() {
      //     let date = new Date();
      //   let year = date.getFullYear().toString();
      //   let month = (date.getMonth() + 1).toString();
      //   let day = date.getDate().toString();
      let that = this;
      let data = new FormData();
      //data.append('cityName', '乌海市');
      data.append('startTime', '2020-02-10 ' + this.currentHour + ':00:00');
      data.append('zhibiao', '');

      let param = {
        this: that,
        url: config.webapiUrl + '/modelresult/getModelForcastValue',
        data: data,
        successFunc: response => {
          if (response.status === 200 && response.data.data) {
            this.updateR1Option(response.data.data);
            this.updateR3Option(response.data.data);
          }
        },
        failFunc: response => {
          let params = {
            this: that,
            title: '提示',
            message: '网络连接错误！' + response,
            type: 'warning'
          };
          commonOper.Notification(params);
        }
      };
      commonOper.HttpPost(param);
    },
    updateR1Option(data) {
      let zhibiao = data[0].zhibiaoArray;
      let baseArray = data[0].correlationScore;

      let colNum = zhibiao.length;
      let lineNum = zhibiao.length;
      let res = [];
      for (let i = 0; i < lineNum; i++) {
        // slice() 方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象。且原始数组不会被修改。
        let temp = baseArray.slice(i * colNum, i * colNum + colNum);
        res.push(temp);
      }
      let result = [];
      for (let i = 0; i < lineNum; i++) {
        for (let j = 0; j < colNum; j++) {
          result.push([i, j, Math.round(res[i][j] * 100) / 100]);
        }
      }
      this.R1Option.xAxis.data = zhibiao;
      this.R1Option.yAxis.data = zhibiao;

      this.R1Option.series[0].data = result;
      this.R1Chart.setOption(this.R1Option);
    },
    updateR3Option(data) {
      let that = this;
      console.log('updateR3Option',data);
      let xArr = [];
      let resArr = [];
      let index = 0;
      _.forEach(data, function(value) {
        xArr.push('02月10日' + (that.currentHour + index) + '时');
        if (that.currentzhibiao == 'pm25') {
          resArr.push(Math.round(value.y.pm25 * 100) / 100);
        }
        index++;
      });
      
      this.R3Option.xAxis[0].data = xArr;
      this.R3Option.series[0].data = resArr;
      this.R3Chart.setOption(this.R3Option);
    },
    onZhibiaoChange(e){
      this.currentzhibiao=e.target.value;
      this.addresultlayer(e.target.value);
    },
  },
  components: {
    TimeBar
  }
};
</script>
<style scoped>
.R3grid {
  padding: 2px;
  border: 1px solid #20558b;

  border-top-right-radius: 15px;
  border-bottom-left-radius: 15px;
  border-top: 6px solid #2089f382;
  border-top-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-top-right-radius: 15px;
  box-sizing: border-box;
  /* background: linear-gradient(to left, #00d3e7, #00d3e7) left top no-repeat,
    linear-gradient(to bottom, #00d3e7, #00d3e7) left top no-repeat,
    linear-gradient(to left, #00d3e7, #00d3e7) right bottom no-repeat,
    linear-gradient(to left, #00d3e7, #00d3e7) right bottom no-repeat;
  background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px; */
}
.r3grid-L1 {
  height: 265px;
}
.r3grid-L2 {
  height: 380px;
}
.r3grid-M1 {
  height: 660px;
}
.r3grid-R1 {
  height: 380px;
}
.r3grid-R2 {
  height: 260px;
}
.r3grid-L3 {
  height: 295px;
}
.r3grid-R3 {
  height: 295px;
}
.r3grid-R2-Title {
  min-height: 48px;
  font-size: 20px;
  color: rgb(255, 255, 255);
  font-weight: 600;
  line-height: 48px;
  text-align: center;
}
.r3grid-R2-Content {
  /* padding-left: 25px; */
  padding-top: 15px;
  padding-bottom: 10px;
  font-size: 14px;
  color: #d9d9d9;
  line-height: 14px;
  text-align: center;
}
.r3grid-R2-Span-Up {
  color: #ff0000;
  font-size: 16px;
  font-weight: 600;
  padding: 6px;
}
.counter {
  margin-top: 15px;
  text-align: center;
  position: relative;
}
.counter .counter-content {
  width: 60px;
  height: 60px;
  border-radius: 40%;
  background: #fff;
  padding: 10px 0;
  margin: 0 auto 10px;
  z-index: 1;
  position: relative;
  transition: all 0.3s ease 0s;
}
.counter .counter-content:before {
  content: "";
  width: 122%;
  height: 122%;
  border-radius: 50%;
  border: 10px solid #08a9ed;
  border-bottom: 10px solid transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.counter .counter-content:after {
  content: "";
  border-top: 16px solid #08a9ed;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
}
.counter .counter-icon {
  display: block;
  font-size: 50px;
  color: #08a9ed;
  line-height: 50px;
}
.counter .counter-value {
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.7);
  line-height: 40px;
}
.counter .title {
  display: inline-block;
  padding: 5px 15px;
  background: #08a9ed;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  text-transform: capitalize;
  margin: 0;
}
.counter.red .counter-content:before {
  border-color: #ef5f61;
  border-bottom-color: transparent;
}
.counter.red .counter-content:after {
  border-top-color: #ef5f61;
}
.counter.red .counter-icon {
  color: #ef5f61;
}
.counter.red .title {
  background: #ef5f61;
}
.counter.blue .counter-content:before {
  border-color: #4d9fcf;
  border-bottom-color: transparent;
}
.counter.blue .counter-content:after {
  border-top-color: #4d9fcf;
}
.counter.blue .counter-icon {
  color: #4d9fcf;
}
.counter.blue .title {
  background: #4d9fcf;
}
.counter.purple .counter-content:before {
  border-color: #a7bf46;
  border-bottom-color: transparent;
}
.counter.purple .counter-content:after {
  border-top-color: #a7bf46;
}
.counter.purple .counter-icon {
  color: #a7bf46;
}
.counter.purple .title {
  background: #a7bf46;
}
</style>